<template>
  <div>
    <!-- 表单 -->
    <TopFilter ref="form" :cols="3" :list="list" @filterChange="formChange"></TopFilter>
    <!-- 表格 -->
    <FilterTable
      ref="table"
      height="auto"
      maxHeight="350"
      :columns="columns"
      :datakey="'rows'"
      :dataSource="dataSource"
      selectionType="single"
      :fetchapi="fetchApi"
      :params="fetchParams"
      columnsRef="partPartOutboundPartSalesQuoteComponentsCustomerChoice"
      :onRowSelectChange="arr => (this.onChangeColumn = arr)"
      :onColumnsChange="columns => (this.columns = columns)"
    >
    </FilterTable>
    <div class="btnWrap">
      <el-button size="small" @click="cancel()">取 消</el-button>
      <el-button size="small" type="primary" @click="determine">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { findPartCustomer, customersdict } from '@/api/part/partOutbound/partSalesQuote/index.js';
import { customerDetail, customerType } from '@/api/part/partOut/partSales/index';
export default {
  name: 'partSalesQuote',
  components: {},
  mixins: [dictionary],
  data() {
    return {
      onChangeColumn: [], // 选择的数据信息
      fetchApi: customerDetail,
      list: this.createList(),
      columns: this.createColumns(),
      dataSource: [],
      fetchParams: { xhrAbort: true },
      /** 模态框 状态 */
      isShowquotationNumber: false
      /** 按钮状态 */

      // 表格里

      // 下面

      // 控制操作按钮
    };
  },
  computed: {},
  mounted() {
    this.customersdict();
  },
  methods: {
    // 确定方法
    determine() {
      if (this.onChangeColumn.length == 0) {
        this.$notify.error({
          title: '错误',
          message: '请选择一条内容'
        });
      } else {
        this.$emit('confirm', this.onChangeColumn);
      }
    },
    // 客户类别下拉框
    async customersdict() {
      const res = await customersdict();
      // this.columns.find(item => item.dataIndex == 'customerTypeCode').editItems = res.data.map(x => ({ text: x.customerTypeName, value: x.customerTypeCode }));
      this.list.find(item => item.fieldName == 'customerTypeCode').itemList = res.data.map(x => ({ text: x.customerTypeName, value: x.customerTypeCode }));
    },
    // 取消的方法
    cancel() {
      this.$emit('cancel');
    },
    // 配件报价单选择 确定方法
    confirmQuotationNumber() {},
    // 表单的方法
    formChange(val) {
      this.fetchParams.xhrAbort = true;
      this.fetchParams = Object.assign(val, { xhrAbort: false });
    },
    createList() {
      return [
        {
          type: 'INPUT',
          label: '客户代码',
          fieldName: 'customerCode'
        },
        {
          type: 'INPUT',
          label: '客户名称',
          fieldName: 'customerName'
        },
        {
          type: 'SELECT',
          label: '来源',
          fieldName: 'oemTag',
          itemList: this.createDictList('1045')
        },
        // {
        //   type: 'SELECT',
        //   label: 'OEM下发',
        //   fieldName: 'oemTag',
        //   placeholder: '',
        //   initialValue: '',
        //   itemList: this.createDictList('1004')
        // },
        {
          type: 'SELECT',
          label: '客户类别',
          fieldName: 'customerTypeCode',
          itemList: []
        }
      ];
    },
    createColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '客户代码',
          dataIndex: 'CUSTOMER_CODE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '客户名称',
          dataIndex: 'CUSTOMER_NAME',
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '客户拼音',
          dataIndex: 'CUSTOMER_SPELL',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '客户类别',
          dataIndex: 'CUSTOMER_TYPE_NAME',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '加价率',
          dataIndex: 'PRICE_ADD_RATE',
          hidden: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '销售基价',
          dataIndex: 'SALES_BASE_PRICE_TYPE',
          hidden: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '数据来源',
          dataIndex: 'OEM_TAG',
          editable: false,
          editType: 'select',
          editItems: this.createDictList(1045),
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList(1045)
        }
      ];
    }
  }
};
</script>

<style scoped>
.btnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
